<script setup>
import { ref, defineProps, watch, defineEmits, handleError } from "vue"
let tableData = ref([{
    info: "/src/assets/images/book.png", "number": "《活着》",
    "price": "￥25.00", "type": "1", "section": "￥25.00", "status": "待发货",
    "time": "2023-11-11 12:00:00", "id": "1"
},{
    info: "/src/assets/images/book.png", "number": "《活着》",
    "price": "￥25.00", "type": "1", "section": "￥25.00", "status": "待发货",
    "time": "2023-11-11 12:00:00", "id": "1"
},{
    info: "/src/assets/images/book.png", "number": "《活着》",
    "price": "￥25.00", "type": "1", "section": "￥25.00", "status": "待发货",
    "time": "2023-11-11 12:00:00", "id": "1"
}])
let dialogVisible = ref(true)
const props = defineProps({
    isDialog: Boolean
})
const emit = defineEmits(['closeDialog'])
watch(() => props.isDialog, (newVal, oldVal) => {
    console.log('newVal ==>', newVal)
    dialogVisible.value = newVal
})

function close() {
    dialogVisible.value = false
    emit('closeDialog', false)

}
</script>

<template>
    <div class="CollectionDialog">
        <el-dialog title="" v-model="dialogVisible" width="1440" @close="close">
            <div class="dialog-content">
                <div class="line-1">
                    <div style="width: 402px;display: flex;align-items: center;"> <el-button class="button"
                            style="background-color: #1677FF;"><img class="img" src="@/assets/images/shelves/upload.png"
                                alt="">
                            <div>批量上架
                            </div>
                        </el-button>
                        <el-button class="button" style="background-color: #6B7280;margin-right: 16px;"><img class="img"
                                src="@/assets/images/shelves/download.png" alt="">
                            <div>批量下架
                            </div>
                        </el-button>
                        <el-select v-model="value" placeholder="全部状态" size="default"
                            style="width: 120px;height: 32px;background: #F7F8FA;margin-right: 16px;">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value" /></el-select>
                    </div>
                    <el-input v-model="value" placeholder="搜索商品名称"
                        style="width: 280px;height: 32px;background: #F7F8FA;">
                        <template #prefix>
                            <img src="@/assets/images/shelves/search.png" alt=""
                                style="color: #A8ABB2;width: 14px;height: 14px;margin-right:12px ;">
                        </template>
                    </el-input>


                </div>
                <el-table :data="tableData" style="width: 100%;background-color: #FFFFFF;">
                    <el-table-column prop="info" label="站点" width="100.09">
                        <template #default="{ row }">
                            {{ row.info }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="number" label="商家账号" width="599.3" />
                    <el-table-column prop="time" label="店铺名称" width="213.73" />
                    <el-table-column prop="price" label="授权时间" width="141.67">

                    </el-table-column>
                    <el-table-column prop="type" label="最后采集时间" width="187.69">
                    </el-table-column>



                    <el-table-column prop="todo" label="操作" width="133.53">
                        <template #default="{ row }">
                            <span @click="handleEdit()" class="operate"><img src="@/assets/images/shelves/translate.png"
                                    alt="">采集商品 </span>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="bottom">
                    <div class="bottom">
                        <span>共 28 条数据 </span>
                    </div>

                    <el-pagination class="currentPage" v-model:page-size="pageSize4" :page-sizes="[100, 200, 300, 400]"
                        layout=" prev, pager, next" :total="400" @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"  prev-text="上一页" next-text="下一页"></el-pagination>
                </div>
            </div>

        </el-dialog>
    </div>
</template>

<style lang="scss" scoped>
.CollectionDialog {
    width: 100%;
    background-color: #D1D5DB;

    .dialog-content {
        width: 1376px;
        height: 1024px;
      
    
        .operate {
            color: #409EFF;
            display: flex;
            align-items: center;
            cursor: pointer;

            img {
                margin-left: 16px;
                height: 14px;
                width: 14px;
                margin-right: 4px;
            }
        }

        .line-1 {
            width: 1376px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: space-between;
            background-color: white;
            height: 74px;
            border-radius: 4px;
            padding: 0 16px;
            margin-bottom: 24px;

            .button {
                width: 110px;
                height: 32px;
                background-color: #409EFF;
                display: flex;
                align-items: center;
                // margin-right: 16px;
            }

            .img {
                width: 14px;
                height: 14px;
                margin-right: 8px;
            }

            div {
                height: 14px;
                color: white;
            }

        }
    }

    .bottom {
        padding: 0 16px;
        width: 100%;
        display: flex;
        height: 67px;
        align-items: center;
        background-color: white;

    }
}
</style>
<style lang="scss">
.CollectionDialog {
    .el-dialog {
        --el-bg-color: #F9FAFB
    }
    .el-table__row{
        background-color: white;
    }

    .el-dialog__headerbtn {
        display: none;
    }

    .dialog-content {
        .line-1 {
             
            .el-select__placeholder {
                color: #000000;
            }

            .el-range__icon {
                float: right;
            }

            .el-range-input {
                width: 80px;
            }





            .el-input__icon {
                width: 0;
                height: 0;
            }

            .el-range-separator {
                width: 10px;
                flex: 0;
                margin-left: 41px;

            }

            .el-date-editor .el-range__close-icon--hidden {
                visibility: visible;
                opacity: 1;
            }

            .el-range__close-icon {
                background: url('@/assets/images/ordermangent/date.png') no-repeat center;
                background-size: contain;
                width: 20px;
                /* 根据你的图标大小调整宽度 */
                height: 20px;
                /* 根据你的图标大小调整高度 */
            }

            .el-range__close-icon svg {
                visibility: hidden;
            }
        }
        .number{
            border-radius: 4px;
            border: 1px solid #D1D5DB;
            margin-right: 5px;
        }
    }
}
</style>